<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>激励机制详情 - 知识库平台</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/all.min.css">
    <link rel="stylesheet" th:href="@{/css/common.css}">
    <style>
        .card-header-tabs .nav-link.active {
            font-weight: bold;
            border-bottom: 2px solid #007bff;
        }
        .badge-level {
            font-size: 85%;
            padding: 0.35em 0.65em;
            border-radius: 0.25rem;
        }
        .badge-level-1 { background-color: #6c757d; color: white; }
        .badge-level-2 { background-color: #28a745; color: white; }
        .badge-level-3 { background-color: #17a2b8; color: white; }
        .badge-level-4 { background-color: #ffc107; color: black; }
        .badge-level-5 { background-color: #dc3545; color: white; }
        
        .ranking-table th, .ranking-table td {
            vertical-align: middle;
        }
        
        .score-rule-card {
            transition: all 0.3s;
        }
        
        .score-rule-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        }
        
        .avatar-sm {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .monthly-rewards {
            border-left: 4px solid #007bff;
            padding-left: 15px;
        }
        
        .ranking-badge {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 12px;
        }
        
        .ranking-badge-1 { background-color: #ffd700; color: #000; }
        .ranking-badge-2 { background-color: #c0c0c0; color: #000; }
        .ranking-badge-3 { background-color: #cd7f32; color: #fff; }
    </style>
</head>
<body>
    <!-- 引入公共头部 -->
    <div th:replace="~{common/header :: header}"></div>
    
    <div class="container mt-4">
        <div class="row">
            <div class="col-lg-12 mb-4">
                <div class="jumbotron py-4">
                    <h1 class="display-5">平台激励机制</h1>
                    <p class="lead">我们鼓励用户积极参与平台建设，共同创建高质量的电子书知识库</p>
                    <hr class="my-4">
                    <p>通过积分规则和等级奖励，表彰和回馈为平台做出贡献的用户</p>
                </div>
            </div>
        </div>
        
        <!-- 积分规则 -->
        <div class="row mb-4">
            <div class="col-12">
                <h3 class="mb-3">积分规则</h3>
                <div class="card-deck">
                    <div class="card score-rule-card">
                        <div class="card-body text-center">
                            <i class="fas fa-upload fa-3x text-primary mb-3"></i>
                            <h5 class="card-title">上传书籍</h5>
                            <p class="card-text"><span class="badge badge-primary badge-pill">+5分/本</span></p>
                            <p class="card-text text-muted small">上传优质电子书为平台增加资源</p>
                        </div>
                    </div>
                    <div class="card score-rule-card">
                        <div class="card-body text-center">
                            <i class="fas fa-edit fa-3x text-success mb-3"></i>
                            <h5 class="card-title">修改书籍信息</h5>
                            <p class="card-text"><span class="badge badge-success badge-pill">+3分/次</span></p>
                            <p class="card-text text-muted small">修正或完善书籍信息</p>
                        </div>
                    </div>
                    <div class="card score-rule-card">
                        <div class="card-body text-center">
                            <i class="fas fa-download fa-3x text-info mb-3"></i>
                            <h5 class="card-title">下载书籍</h5>
                            <p class="card-text"><span class="badge badge-info badge-pill">+2分/次</span></p>
                            <p class="card-text text-muted small">下载书籍促进平台资源利用</p>
                        </div>
                    </div>
                    <div class="card score-rule-card">
                        <div class="card-body text-center">
                            <i class="fas fa-book-reader fa-3x text-warning mb-3"></i>
                            <h5 class="card-title">阅读书籍</h5>
                            <p class="card-text"><span class="badge badge-warning badge-pill">+2分/次</span></p>
                            <p class="card-text text-muted small">在线阅读书籍</p>
                        </div>
                    </div>
                    <div class="card score-rule-card">
                        <div class="card-body text-center">
                            <i class="fas fa-comment fa-3x text-danger mb-3"></i>
                            <h5 class="card-title">评论书籍</h5>
                            <p class="card-text"><span class="badge badge-danger badge-pill">+2分/次</span></p>
                            <p class="card-text text-muted small">为书籍添加有价值的评论</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 账户等级 -->
        <div class="row mb-4">
            <div class="col-12">
                <h3 class="mb-3">账户等级</h3>
                <div class="table-responsive">
                    <table class="table table-striped table-bordered">
                        <thead class="thead-dark">
                            <tr>
                                <th>等级</th>
                                <th>名称</th>
                                <th>积分要求</th>
                                <th>每日下载限制</th>
                                <th>特权</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><span class="badge badge-level badge-level-1">Lv.1</span></td>
                                <td>初级用户</td>
                                <td>0-49分</td>
                                <td>5本/天</td>
                                <td>基础下载权限</td>
                            </tr>
                            <tr>
                                <td><span class="badge badge-level badge-level-2">Lv.2</span></td>
                                <td>中级用户</td>
                                <td>50-199分</td>
                                <td>10本/天</td>
                                <td>增加下载限制，获取批量下载</td>
                            </tr>
                            <tr>
                                <td><span class="badge badge-level badge-level-3">Lv.3</span></td>
                                <td>高级用户</td>
                                <td>200-499分</td>
                                <td>20本/天</td>
                                <td>优先下载，格式转换优先处理</td>
                            </tr>
                            <tr>
                                <td><span class="badge badge-level badge-level-4">Lv.4</span></td>
                                <td>专家用户</td>
                                <td>500-999分</td>
                                <td>30本/天</td>
                                <td>高速下载通道，批量转换格式</td>
                            </tr>
                            <tr>
                                <td><span class="badge badge-level badge-level-5">Lv.5</span></td>
                                <td>资深专家</td>
                                <td>1000分以上</td>
                                <td>50本/天</td>
                                <td>无限下载，个人专属书单推荐</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        
        <!-- 月度奖励 -->
        <div class="row mb-4">
            <div class="col-12">
                <h3 class="mb-3">月度榜单奖励</h3>
                <div class="card">
                    <div class="card-body">
                        <div class="monthly-rewards mb-4">
                            <h4>奖励规则</h4>
                            <p>每月根据用户的活跃度和贡献，评选出总榜、上传榜和编辑榜的前三名用户，予以特别奖励。</p>
                            <ul>
                                <li><strong>第一名</strong>：账户升级为资深专家（Lv.5），获得100积分奖励</li>
                                <li><strong>第二名</strong>：账户升级为专家用户（Lv.4），获得50积分奖励</li>
                                <li><strong>第三名</strong>：账户升级为高级用户（Lv.3），获得30积分奖励</li>
                            </ul>
                        </div>
                        
                        <!-- 榜单切换 -->
                        <ul class="nav nav-tabs card-header-tabs" id="rankingTabs" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="total-tab" data-toggle="tab" href="#total" role="tab" aria-controls="total" aria-selected="true">总榜</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="upload-tab" data-toggle="tab" href="#upload" role="tab" aria-controls="upload" aria-selected="false">上传榜</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="edit-tab" data-toggle="tab" href="#edit" role="tab" aria-controls="edit" aria-selected="false">编辑榜</a>
                            </li>
                        </ul>
                        
                        <!-- 榜单内容 -->
                        <div class="tab-content mt-3" id="rankingTabContent">
                            <!-- 总榜 -->
                            <div class="tab-pane fade show active" id="total" role="tabpanel" aria-labelledby="total-tab">
                                <div class="text-center py-4" id="totalRankingLoader">
                                    <div class="spinner-border text-primary" role="status">
                                        <span class="sr-only">加载中...</span>
                                    </div>
                                    <p class="mt-2">加载榜单数据中...</p>
                                </div>
                                <div class="table-responsive" id="totalRankingTable" style="display: none;">
                                    <table class="table ranking-table">
                                        <thead>
                                            <tr>
                                                <th>排名</th>
                                                <th>用户</th>
                                                <th>总积分</th>
                                                <th>上传积分</th>
                                                <th>编辑积分</th>
                                                <th>上传书籍数</th>
                                                <th>编辑次数</th>
                                                <th>等级</th>
                                            </tr>
                                        </thead>
                                        <tbody id="totalRankingBody">
                                            <!-- 通过JavaScript动态填充 -->
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            
                            <!-- 上传榜 -->
                            <div class="tab-pane fade" id="upload" role="tabpanel" aria-labelledby="upload-tab">
                                <div class="text-center py-4" id="uploadRankingLoader">
                                    <div class="spinner-border text-primary" role="status">
                                        <span class="sr-only">加载中...</span>
                                    </div>
                                    <p class="mt-2">加载榜单数据中...</p>
                                </div>
                                <div class="table-responsive" id="uploadRankingTable" style="display: none;">
                                    <table class="table ranking-table">
                                        <thead>
                                            <tr>
                                                <th>排名</th>
                                                <th>用户</th>
                                                <th>上传积分</th>
                                                <th>上传书籍数</th>
                                                <th>总积分</th>
                                                <th>等级</th>
                                            </tr>
                                        </thead>
                                        <tbody id="uploadRankingBody">
                                            <!-- 通过JavaScript动态填充 -->
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            
                            <!-- 编辑榜 -->
                            <div class="tab-pane fade" id="edit" role="tabpanel" aria-labelledby="edit-tab">
                                <div class="text-center py-4" id="editRankingLoader">
                                    <div class="spinner-border text-primary" role="status">
                                        <span class="sr-only">加载中...</span>
                                    </div>
                                    <p class="mt-2">加载榜单数据中...</p>
                                </div>
                                <div class="table-responsive" id="editRankingTable" style="display: none;">
                                    <table class="table ranking-table">
                                        <thead>
                                            <tr>
                                                <th>排名</th>
                                                <th>用户</th>
                                                <th>编辑积分</th>
                                                <th>编辑次数</th>
                                                <th>总积分</th>
                                                <th>等级</th>
                                            </tr>
                                        </thead>
                                        <tbody id="editRankingBody">
                                            <!-- 通过JavaScript动态填充 -->
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入公共底部 -->
    <div th:replace="~{common/footer :: footer}"></div>

    <!-- JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        $(document).ready(function() {
            // 加载总积分排行榜
            loadRanking('total', '/ranking/api/total?limit=10');
            
            // 标签切换事件
            $('#rankingTabs a').on('click', function (e) {
                e.preventDefault();
                
                const tabId = $(this).attr('id');
                if (tabId === 'upload-tab') {
                    loadRanking('upload', '/ranking/api/upload?limit=10');
                } else if (tabId === 'edit-tab') {
                    loadRanking('edit', '/ranking/api/edit?limit=10');
                } else if (tabId === 'total-tab') {
                    // 如果已经加载过，不需要重新加载
                    if ($('#totalRankingBody').children().length === 0) {
                        loadRanking('total', '/ranking/api/total?limit=10');
                    }
                }
                
                $(this).tab('show');
            });
            
            // 加载排行榜数据
            function loadRanking(type, url) {
                $(`#${type}RankingLoader`).show();
                $(`#${type}RankingTable`).hide();
                
                $.ajax({
                    url: url,
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        if (response.code === 200) {
                            renderRanking(type, response.data);
                        } else {
                            showRankingError(type, '加载排行榜数据失败');
                        }
                    },
                    error: function() {
                        showRankingError(type, '网络错误，请稍后重试');
                    }
                });
            }
            
            // 渲染排行榜数据
            function renderRanking(type, data) {
                const tbody = $(`#${type}RankingBody`);
                tbody.empty();
                
                if (data && data.length > 0) {
                    data.forEach((item, index) => {
                        let row = '<tr>';
                        
                        // 排名列（前三名显示特殊样式）
                        if (index < 3) {
                            row += `<td><div class="ranking-badge ranking-badge-${index + 1}">${index + 1}</div></td>`;
                        } else {
                            row += `<td>${index + 1}</td>`;
                        }
                        
                        // 用户信息列
                        row += `<td>
                                <div class="d-flex align-items-center">
                                    <img src="${item.avatarUrl || '/img/default-avatar.png'}" class="avatar-sm mr-2" alt="头像">
                                    <div>
                                        <div>${escapeHtml(item.nickname || item.username)}</div>
                                        <small class="text-muted">注册于 ${item.registerTime}</small>
                                    </div>
                                </div>
                            </td>`;
                        
                        // 根据不同类型的排行榜，显示不同的列
                        if (type === 'total') {
                            row += `<td>${item.totalScore}</td>
                                   <td>${item.uploadScore}</td>
                                   <td>${item.editScore}</td>
                                   <td>${item.uploadCount || 0}</td>
                                   <td>${item.editCount || 0}</td>`;
                        } else if (type === 'upload') {
                            row += `<td>${item.uploadScore}</td>
                                   <td>${item.uploadCount || 0}</td>
                                   <td>${item.totalScore}</td>`;
                        } else if (type === 'edit') {
                            row += `<td>${item.editScore}</td>
                                   <td>${item.editCount || 0}</td>
                                   <td>${item.totalScore}</td>`;
                        }
                        
                        // 等级列
                        row += `<td><span class="badge badge-level badge-level-${item.accountLevel}">Lv.${item.accountLevel}</span></td>`;
                        
                        row += '</tr>';
                        tbody.append(row);
                    });
                } else {
                    tbody.append('<tr><td colspan="8" class="text-center">暂无排行数据</td></tr>');
                }
                
                $(`#${type}RankingLoader`).hide();
                $(`#${type}RankingTable`).show();
            }
            
            // 显示排行榜错误
            function showRankingError(type, message) {
                $(`#${type}RankingLoader`).hide();
                $(`#${type}RankingTable`).show();
                $(`#${type}RankingBody`).html(`<tr><td colspan="8" class="text-center text-danger">${message}</td></tr>`);
            }
            
            // 转义HTML
            function escapeHtml(unsafe) {
                return unsafe
                    .replace(/&/g, "&amp;")
                    .replace(/</g, "&lt;")
                    .replace(/>/g, "&gt;")
                    .replace(/"/g, "&quot;")
                    .replace(/'/g, "&#039;");
            }
        });
    </script>
</body>
</html> 